<template>
<!-- 收付费作业-退费 资料查询页面 -->
    <div class="fillcontain">
        <el-form :model="searchParams" :rules="rules" ref="ruleForm" label-width="100px" class="search_container">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="客户号码" prop="customerNum">
                        <el-input v-model="searchParams.customerNum" placeholder="请输入" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="受款人姓名" prop="receiptName">
                        <el-input v-model="searchParams.receiptName"   :disabled="true" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="text_center">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain  icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>
        <div class="contain">
          <div class="table_container">
            <el-table
                 v-loading="loading"
                 :data="tableData"
                 highlight-current-row
                 header-cell-class-name="table-header-class"
                 style="width:100%">
                <el-table-column
                min-width="120"
                    property="requestNum"
                    label="请款号"
                    align='center'
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    min-width="120"
                   property="chdrNum"
                   label="保单号"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                 min-width="120"
                   property="groupNum"
                   label="组号"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                 <el-table-column
                 min-width="120"
                   property="amount"
                   label="金额"
                   align='center'
                   show-overflow-tooltip :formatter="formatAmount">
                </el-table-column> 
                <el-table-column
                min-width="120"
                   property="payerType"
                   label="付款类型"
                   align='center'
                   show-overflow-tooltip :formatter="formatPayType">
                </el-table-column> 
                <el-table-column
                 min-width="120"
                   property="customerNum"
                   label="客户号"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                 min-width="120"
                   property="companyNum"
                   label="公司"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                 min-width="120"
                   property="customerName"
                   label="姓名"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                 min-width="120"
                   property="salerNum"
                   label="营销员代码"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                 <el-table-column 
                 min-width="120"
                   property="salerName"
                   label="营销员姓名"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                 <el-table-column 
                 min-width="120"
                   property="reFundstatus"
                   label="状态"
                   align='center'
                   show-overflow-tooltip :formatter="reFundStatusInfo">
                </el-table-column>
                 <el-table-column 
                 min-width="120"
                   property="grantDate"
                   label="授权日"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
                 <el-table-column 
                 min-width="120"
                   property="manualPayerBy"
                   label="手工付款人员"
                   align='center'
                   show-overflow-tooltip>
                </el-table-column>
            </el-table>
           <el-row>
                <el-col :span="24">
                    <div class="pagination">
                        <el-pagination
                            background
                            v-if='paginations.total > 0'
                            :page-sizes="paginations.pageSizes"
                            :page-size="paginations.pageSize"
                            :layout="paginations.layout"
                            :total="paginations.total"
                            :current-page='paginations.pageIndex'
                            @current-change='handleCurrentChange'
                            @size-change='handleSizeChange'>
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
          </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapGetters } from 'vuex'
    import constant from '@/utils/constant';
    import { getReFundInoQueryList } from '@/api/selloutLock/reFundInfo';
import { isNumber } from 'util';
    export default {
        data(){
            return {
                // 查询条件
                rules:{
                    customerNum:[],
                    receiptName:[],
                },
                searchParams:{
                    customerNum:'', //客户号码
                    receiptName:'', //受款人姓名
                },
                tableData: [],
                loading:false,
              //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
                pickerOptions1: {
                  disabledDate(time) {
                    return time.getTime() > Date.now();
                  }
                }
            }
        },
        created(){
//          this.getList();
        },
        mounted(){
            // this.getList();
        },
        methods: {

            //付款类型
            formatPayType(row){
                if(row.payerType == '0'){
                    return "现金";
                }
                else if(row.payerType == '1'){
                    return "支票";
                }
                else if(row.payerType == '5'){
                    return "自动付款";
                }else{
                    return "";
                }
            },
            //金额格式转化展示,保留小数点两位
            formatAmount(row){
               if(row.amount == null || row.amount == ""){
                   return '';
               }
               return row.amount.toFixed(2);
            },

            //退费状态赋值
            reFundStatusInfo(row){
                if(row.reFundstatus == 'RQ'){
                    return '建档';
                }
                else if(row.reFundstatus == 'PR'||row.reFundstatus == 'PF'){
                    return '已付款';
                }
                else if(row.reFundstatus == 'CK'){
                    return '支票重开';
                }
                else if(row.reFundstatus == 'AU'){
                    return '授权';
                }
                else if(row.reFundstatus == 'QS'){
                    return '签收';
                }
                else if(row.reFundstatus == 'FC'){
                    return '付款';
                }else{
                    return "";
                }
            },

            // 查询列表
            getList(){
                console.log("CYQ:20200304-");
                this.paginations.total=0;
                this.tableData=[];

                let params = {
                    "customerNum": this.searchParams.customerNum,
                    "receiptName": this.searchParams.receiptName,
                    "pageSize"   : this.paginations.pageSize,
                    "pageNumber" : this.paginations.pageIndex,
                    "orderBy"    : '',
                }

                //验空
                if(params.customerNum == null ||params.customerNum == ''){
                    this.$message({
                        message: '请输入客户号',
                        type: 'error'
                    });
                    return false;
                }
                
                //客户号必须为8位数字
                if(isNaN(params.customerNum) || params.customerNum.length != 8){
					this.$message({
                        message: '请输入正确的客户号!',
                        type: 'error'
                    });
					return false;
				}

                this.$store.dispatch('loading/CHANGE_LOADING',true);
                getReFundInoQueryList(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                    console.log(res.data);
                    if(res.resultCode == constant.SUCCESS){
                        this.paginations.total = res.data.total;
                        if((res.data[0].customerNum !=null && res.data[0].customerNum !="") && (res.data[0].receiptName !=null  && res.data[0].receiptName !="")){
                            this.tableData = res.data;
                            this.$message({
                                message: res.resultMsg,
                                type: 'success'
                            });
                        }
                        if(res.data[0].customerNum != null && res.data[0].customerNum != ""){
                            this.searchParams.customerNum = res.data[0].customerNum;
                        }
                        this.searchParams.receiptName = res.data[0].receiptName;
                    }
                }).catch(err =>{
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
               this.paginations.pageSize = pageSize;
               this.getList();
            },
            // 上下分页
            handleCurrentChange(page) {
               this.paginations.pageIndex = page;
               this.getList();
            },
            // 根据条件查询列表
            subGetList(){
                console.log("CYQ:20200214-收付费作业-退费资料查询!");
                this.paginations.pageIndex=1;
                this.getList();
            },
            // 清除查询条件
            resetSearch(){
                this.searchParams.customerNum = '';
                this.searchParams.receiptName = '';
            }
        },
        computed:{
            ...mapGetters(['tags']),
            reload(){
                return this.$store.state.loading.reload;
            }
        },
        activated(){
            if(this.reload){
                this.$store.dispatch('loading/CHNAGE_RELOAD',false)
                Object.assign(this.$data, this.$options.data());
            }
        }
    }
</script>

<style lang="less" scoped>
    .fillcontain{
        padding-bottom: 0;
    }
    .contain{
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }
   .pagination{
       padding: 10px 20px;
       text-align: right;
   }
   .operationIcon{
        // padding: 12px;
        border:1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px; 
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow:0 0 3px #f9f9f9;
        .svg-icon{
            font-size: 14px;
            fill:#68a3fc;
        }
   }
   .search_container{
       padding: 20px 20px 0 20px;
   }
</style>



